<template>
	<view class="group-detail-container">
		<!-- 顶部导航栏 -->
		<public-module leftIcon="arrow-left" :title="groupInfo.name"></public-module>

		<!-- 小组基本信息 -->
		<view class="group-info-card" :class="{'expanded': isCardExpanded}" @click="isCardExpanded = !isCardExpanded">
			<view class="group-info-left">
				<view class="group-name">
					<u-input v-if="isEditing" v-model="groupInfo.name" placeholder="请输入小组名称"></u-input>
					<template v-else>{{groupInfo.name}}</template>
				</view>
				<view class="group-desc" style="white-space: pre-line;" v-if="isCardExpanded">
					<textarea v-if="isEditing" v-model="groupInfo.description" class="punch-textarea"
						placeholder="请输入小组公告"> </textarea>
					<template v-else>{{groupInfo.description}}</template>
				</view>
			</view>
			<view class="btn-container-right" v-if="isCardExpanded">
				<template v-if="isOwner">
					<view class="invite-btn" @click="toggleEdit">
						<u-icon :name="isEditing ? 'checkmark' : 'edit-pen'" size="16" color="#4A89DC"></u-icon>
						<text>{{ isEditing ? '保存' : '修改' }}</text>
					</view>
					<view class="invite-btn" @click="showManagePopup">
						<u-icon name="setting" size="16" color="#4A89DC"></u-icon>
						<text>管理</text>
					</view>
				</template>
				<template v-else>
					<view class="invite-btn" @click="confirmQuit">
						<u-icon name="close" size="16" color="#ff4d4f"></u-icon>
						<text>退出</text>
					</view>
				</template>
				<view class="invite-btn" @click="generateInvite">
					<u-icon name="share" size="16" color="#4A89DC"></u-icon>
					<text>邀请</text>
				</view>
			</view>
		</view>

		<!-- 管理弹窗 -->
		<view v-if="showManage" class="manage-popup-container">
			<view class="manage-popup">
				<view class="manage-header">
					<view class="manage-title">小组管理</view>
					<u-icon name="close" size="20" color="#999" @click="showManage = false" class="close-icon"></u-icon>
				</view>
				<view class="manage-list">
					<view class="manage-item" @click="showMemberManage">
						<text>成员管理</text>
						<u-icon name="arrow-right" size="14" color="#666"></u-icon>
					</view>
					<view class="manage-item danger" @click="confirmDissolve">
						<text>解散小组</text>
						<u-icon name="arrow-right" size="14" color="#666"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 选项卡 -->
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{'active': currentTab === index}"
				@click="switchTab(index)">
				<text>{{tab}}</text>
			</view>
		</view>

		<!-- 打卡情况 -->
		<view class="tab-content" v-if="currentTab === 0">
			<!-- 打卡情况子选项卡 -->
			<view class="tabs">
				<view v-for="(subTab, subIndex) in punchSubTabs" :key="subIndex" class="tab-item"
					:class="{'active': currentPunchSubTab === subIndex}" @click="switchPunchSubTab(subIndex)"
					v-if="subIndex !== 2 || isOwner">
					<text>{{subTab}}</text>
				</view>
			</view>
			<!-- 今日已打卡 -->
			<view class="punch-list" v-if="currentPunchSubTab === 0">
				<view v-for="(punch, index) in punchList" :key="punch.studyMarkId" class="punch-card">
					<view>
						<text class="punch-card-index">{{index + 1}}</text> <!-- 序号 -->
						<text class="punch-card-content">{{punch.nickName || '未知昵称'}}</text>

					</view>
					<view class="punch-card-content" v-if="punch.studyContent">
						{{punch.studyContent}}
					</view>
					<view class="punch-card-content" v-if="punch.studyContent">
						{{punch.studyMarkDate}}
					</view>
				</view>
			</view>
			<!-- 今日未打卡 -->
			<view class="punch-list" v-if="currentPunchSubTab === 1">
				<view v-for="(punch, index) in unPunchList" :key="punch.studyMarkId" class="punch-card">
					<view class="punch-card-header">
						<text class="un-punch-card-index">{{index + 1}}</text> <!-- 序号 -->
						<text class="punch-card-nickname">{{punch.nickName || '未知昵称'}}</text>
					</view>
				</view>
			</view>
			<!-- 昨日未打卡 -->
			<view class="punch-list" v-if="currentPunchSubTab === 2">
				<view v-for="(punch, index) in unPunchList" :key="punch.studyMarkId" class="punch-card">
					<view class="punch-card-header">
						<text class="un-punch-card-index">{{index + 1}}</text> <!-- 序号 -->
						<text class="punch-card-nickname">{{punch.nickName || '未知昵称'}}</text>
					</view>
				</view>
			</view>
			<!-- 月度未打卡 -->
			<view class="punch-list" v-if="currentPunchSubTab === 3">
				<view v-for="(punch, index) in unPunchList" :key="punch.studyMarkId" class="punch-card">
					<view class="punch-card-header">
						<text class="un-punch-card-index">{{index + 1}}</text> <!-- 序号 -->
						<text class="punch-card-nickname">{{punch.nickName || '未知昵称'}}</text>
						<text class="punch-card-nickname">{{punch.unStudyMarkCounts}}天</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 模考情况 -->
		<view class="tab-content" v-if="currentTab === 1">
			<view class="exam-ranking">
				<view class="ranking-header">
					<text class="ranking-number">排名</text>
					<text class="member-name">昵称</text>
					<text class="exam-count">次数</text>
					<text class="avg-score">均分</text>
					<text class="beat-rate">均击败率</text>
				</view>
				<view v-for="(item, index) in examRanking" :key="index" class="ranking-item">
					<text class="ranking-number">{{index + 1}}</text>
					<text class="member-name" style="color: blue;" @click="navigateToPersonal(item.userid)">{{item.user_nickname}}</text>
					<text class="exam-count">{{item.examCount}}次</text>
					<text class="avg-score">{{item.avgScore}}分</text>
					<text class="beat-rate">{{item.avgBeatRate}}%</text>
				</view>
			</view>
		</view>

		<!-- 累计情况 -->
		<view class="tab-content" v-if="currentTab === 2">
			<!-- 累计情况子选项卡 -->
			<view class="tabs">
				<view v-for="(subTab, subIndex) in cumulativeSubTabs" :key="subIndex" class="tab-item"
					:class="{'active': currentCumulativeSubTab === subIndex}" @click="switchCumulativeSubTab(subIndex)">
					<text>{{subTab}}</text>
				</view>
			</view>

			<view class="focus-stats">
				<view class="focus-ranking">
					<view v-for="(member, index) in focusRanking" :key="member.id" class="ranking-item">
						<text class="ranking-number">{{index + 1}}</text>
						<text class="member-name">{{member.name}}</text>
						<text
							class="focus-time">{{member.focusTime}}{{currentCumulativeSubTab === 0 || currentCumulativeSubTab === 1 ? '分钟' : '题'}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		markParamsList,
		unMarkParamsList,
		yesterdayUnMarkParamsList,
		monthUnMarkParamsList,
		sumMonthStudyDurationList,
		sumMonthQuestionCountList,
		groupEdit,
		groupDelete,
		groupExit,
		groupExamStatistics
	} from "@/config/api.js";
	export default {
		data() {
			return {
				groupId: '',
				userId: '', // 当前用户ID
				groupInfo: {
					id: '',
					name: '',
					memberCount: 0,
					description: '',
					ownerId: '',
					createTime: '',
					groupNotice: '',
					creatorId: null
				},
				examRanking: [],
				isCardExpanded: false,
				members: [], // 成员列表
				showManage: false,
				showMembers: false,
				tabs: ['打卡情况', '模考天梯', '累计情况'],
				currentTab: 0,
				punchSubTabs: ['今日已打卡', '今日未打卡', '昨日未打卡', '本月未打卡'],
				cumulativeSubTabs: ['本月时长', '日均时长', '本月刷题', '日均刷题'],
				currentCumulativeSubTab: 0, // 新增当前累计子选项卡
				currentPunchSubTab: 0,
				currentYear: new Date().getFullYear(),
				currentMonth: new Date().getMonth() + 1,
				calendarDays: [],
				punchedDays: [], // 打卡日期数组
				isEditing: false, // 添加编辑状态
				originalGroupInfo: {},
				examList: [{
						id: 1,
						name: '行测模拟卷（一）',
						date: '2024-03-15',
						participantCount: 18,
						averageScore: 85
					},
					{
						id: 2,
						name: '行测模拟卷（二）',
						date: '2024-03-18',
						participantCount: 15,
						averageScore: 82
					}
				],
				focusRanking: [],
				punchList: [],
				unPunchList: [],
				upOption: {
					page: {
						num: 0,
						size: 10
					},
					noMoreSize: 5,
					empty: {
						tip: '暂无成员数据'
					}
				},
				mescroll: null
			};
		},
		computed: {
			isOwner() {
				return this.userId === this.groupInfo.ownerId || this.userId === '368' || this.userId === '768';
			}
		},
		onLoad(options) {
			const user = uni.getStorageSync('user') || {};
			this.userId = String(user.userId || ''); // Ensure userId is string

			const group = JSON.parse(decodeURIComponent(options.group));
			this.groupInfo = {
				id: group.id,
				name: group.groupName,
				memberCount: group.memberCount,
				description: group.groupNotice,
				ownerId: String(group.ownerId),
				createTime: group.createTime,
				groupNotice: group.groupNotice,
				creatorId: group.creatorId
			};
			this.groupId = group.id;
			console.log('groupInfo.ownerId:', this.groupInfo.ownerId);
			this.getExamStatistics();
			this.getPunchList();
			this.getMonthStudyDuration();
		},
		methods: {
			generateInvite() {
				const inviteText = `微信小程序内搜“苏榜”，点击学习小组，搜索框粘贴这段话。小组ID${this.groupInfo.id}`;
				uni.setClipboardData({
					data: inviteText,
					success: () => {
						uni.showToast({
							title: '邀请口令已复制，分享给好友吧',
							icon: 'success'
						});
					}
				});
			},
			async getExamStatistics() {
				try {
					const res = await groupExamStatistics(`${this.groupInfo.id}`);
					this.examRanking = res.data;
				} catch (error) {
					console.error('获取模考数据失败：', error);
					uni.showToast({
						title: '获取模考数据失败',
						icon: 'none'
					});
				}
			},
			// 显示管理弹窗
			showManagePopup() {
				this.showManage = true;
			},
			// 显示成员管理
			showMemberManage() {
				this.showManage = false;
				uni.navigateTo({
					url: `/pages/studygroup/memberManage?groupId=${this.groupId}`
				});
			},
			async toggleEdit() {
				if (this.isEditing) {
					try {
						await groupEdit({
							id: this.groupId,
							groupName: this.groupInfo.name,
							groupNotice: this.groupInfo.description
						});
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						});
						this.isEditing = false;
					} catch (error) {
						console.error('修改小组信息失败:', error);
						uni.showToast({
							title: '修改失败',
							icon: 'none'
						});
					}
				} else {
					this.originalGroupInfo = {
						name: this.groupInfo.name,
						description: this.groupInfo.description
					};
					this.isEditing = true;
				}
			},
			// 解散小组
			async confirmDissolve() {
				uni.showModal({
					title: '警告',
					content: '确定要解散该小组吗？解散后数据将无法恢复！',
					success: async (res) => {
						if (res.confirm) {
							try {
								await groupDelete(this.groupId);
								uni.showToast({
									title: '解散成功',
									icon: 'success'
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 1500);
							} catch (error) {
								console.error('解散小组失败：', error);
								uni.showToast({
									title: '解散失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},
			// 切换选项卡
			switchTab(index) {
				this.currentTab = index;
			},
			// 切换打卡情况子选项卡
			switchPunchSubTab(index) {
				this.currentPunchSubTab = index;
				if (index === 1) {
					this.getUnPunchList();
				} else if (index === 2) {
					this.getYesterdayUnPunchList();
				} else if (index === 3) {
					this.getMonthUnPunchList();
				}
			},
			// 获取打卡列表
			async getPunchList() {
				try {
					const res = await markParamsList(`?studyGroup=${this.groupInfo.id}`);
					this.punchList = res.data;
				} catch (error) {
					console.error('获取打卡列表失败：', error);
					uni.showToast({
						title: '获取打卡列表失败',
						icon: 'none'
					});
				}
			},
			async getUnPunchList() {
				try {
					const res = await unMarkParamsList(`?studyGroup=${this.groupInfo.id}`);
					this.unPunchList = res.data;
				} catch (error) {
					console.error('获取打卡列表失败：', error);
					uni.showToast({
						title: '获取打卡列表失败',
						icon: 'none'
					});
				}
			},
			async getYesterdayUnPunchList() {
				try {
					const res = await yesterdayUnMarkParamsList(`?studyGroup=${this.groupInfo.id}`);
					this.unPunchList = res.data;
				} catch (error) {
					console.error('获取打卡列表失败：', error);
					uni.showToast({
						title: '获取打卡列表失败',
						icon: 'none'
					});
				}
			},
			async getMonthUnPunchList() {
				try {
					const res = await monthUnMarkParamsList(`?studyGroup=${this.groupInfo.id}`);
					this.unPunchList = res.data;
				} catch (error) {
					console.error('获取打卡列表失败：', error);
					uni.showToast({
						title: '获取打卡列表失败',
						icon: 'none'
					});
				}
			},
			// 退出小组确认
			async confirmQuit() {
				uni.showModal({
					title: '提示',
					content: '确定要退出该学习小组吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								const res = await groupExit(this.groupId);
								if (res.code == 200) {
									uni.showToast({
										title: '已退出小组',
										icon: 'success'
									});
									const pages = getCurrentPages();
									const prevPage = pages[pages.length - 2];
									if (prevPage && prevPage.route === 'pages/studygroup/index') {
										prevPage.$vm.getStudyGroups();
									}
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
											success: () => {
												if (prevPage && prevPage.route ===
													'pages/studygroup/index') {
													prevPage.$vm
														.getStudyGroups();
												}
											}
										});
									}, 1500);
								}

							} catch (error) {
								console.error('退出小组失败：', error);
								uni.showToast({
									title: '退出失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},
			// 新增切换累计情况子选项卡方法
			switchCumulativeSubTab(index) {
				this.currentCumulativeSubTab = index;
				if (index === 0) {
					this.getMonthStudyDuration();
				} else if (index === 1) {
					this.getDailyStudyDuration();
				} else if (index === 2) {
					this.getMonthQuestionCount();
				} else if (index === 3) {
					this.getDailyQuestionCount();
				}
			},

			// 新增获取月度学习时长方法
			async getMonthStudyDuration() {
				try {
					const res = await sumMonthStudyDurationList(`?studyGroup=${this.groupInfo.id}`);
					this.focusRanking = res.data.map(item => ({
						id: item.userId,
						name: item.nickName,
						focusTime: item.totalDuration,
						dayTime: item.avgDailyDuration
					}));
				} catch (error) {
					console.error('获取月度学习时长失败：', error);
					uni.showToast({
						title: '获取月度学习时长失败',
						icon: 'none'
					});
				}
			},
			// 新增获取月度学习时长方法
			async getDailyStudyDuration() {
				try {
					const res = await sumMonthStudyDurationList(`?studyGroup=${this.groupInfo.id}`);
					this.focusRanking = res.data.map(item => ({
						id: item.userId,
						name: item.nickName,
						focusTime: item.avgDailyDuration
					}));
				} catch (error) {
					console.error('获取月度学习时长失败：', error);
					uni.showToast({
						title: '获取月度学习时长失败',
						icon: 'none'
					});
				}
			},

			// 新增获取月度刷题量方法
			async getMonthQuestionCount() {
				try {
					const res = await sumMonthQuestionCountList(`?studyGroup=${this.groupInfo.id}`);
					this.focusRanking = res.data.map(item => ({
						id: item.userId,
						name: item.nickName,
						focusTime: item.totalQuestionCount
					}));
				} catch (error) {
					console.error('获取月度刷题量失败：', error);
					uni.showToast({
						title: '获取月度刷题量失败',
						icon: 'none'
					});
				}
			},
			async getDailyQuestionCount() {
				try {
					const res = await sumMonthQuestionCountList(`?studyGroup=${this.groupInfo.id}`);
					this.focusRanking = res.data.map(item => ({
						id: item.userId,
						name: item.nickName,
						focusTime: item.avgDailyQuestionCount
					}));
				} catch (error) {
					console.error('获取月度刷题量失败：', error);
					uni.showToast({
						title: '获取月度刷题量失败',
						icon: 'none'
					});
				}
			},
			navigateToPersonal(userId) {
				uni.navigateTo({
					url: '/pages/review/personal?userid=' + userId
				});
			}
		},
	};
</script>

<style>
	.group-detail-container {
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.group-info-card {
		margin: 15px;
		padding: 15px;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		display: flex;
		max-height: 60px;
		/* 默认高度 */
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	.group-info-card.expanded {
		max-height: 300px;
		/* 展开后的高度 */
	}

	.group-info-left {
		width: 80%;
	}

	.group-name {
		font-size: 20px;
		font-weight: bold;
		color: #333;
	}

	.group-desc {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	.btn-container-right {
		width: 20%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.invite-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		padding: 10px;
		border: 1px solid #4A89DC;
		border-radius: 20px;
		color: #4A89DC;
		width: 90%;
		margin-bottom: 10px;
	}

	.overview-card {
		margin: 15px;
		padding: 20px 15px;
		background-color: #fff;
		border-radius: 12px;
		display: flex;
		justify-content: space-around;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	}

	.overview-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.overview-value {
		font-size: 24px;
		font-weight: bold;
		color: #333;
		margin-bottom: 5px;
	}

	.overview-label {
		font-size: 12px;
		color: #999;
	}

	.tabs {
		display: flex;
		background-color: #fff;
		padding: 0 10px;
		border-bottom: 1px solid #f0f0f0;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 10px 0;
		font-size: 14px;
		color: #666;
		position: relative;
	}

	.tab-item.active {
		color: #4A89DC;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 20px;
		height: 2px;
		background-color: #4A89DC;
		border-radius: 1px;
	}

	.tab-content {
		padding: 15px;
	}

	/* 打卡日历样式 */
	.punch-card {
		margin: 15px;
		padding: 15px;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	}

	.punch-card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.punch-card-index {
		font-size: 14px;
		color: #666;
		margin-right: 10px;
	}

	.un-punch-card-index {
		font-size: 14px;
		color: #666;
	}

	.punch-card-nickname {
		font-size: 16px;
		color: #333;
		font-weight: 500;
	}

	.punch-card-date {
		font-size: 14px;
		color: #999;
	}

	.calendar-title {
		text-align: center;
		font-size: 16px;
		font-weight: 500;
		margin-bottom: 15px;
	}

	.calendar-header {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		text-align: center;
		color: #999;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.calendar-body {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 5px;
	}

	.calendar-day {
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #333;
		border-radius: 50%;
	}

	.calendar-day.punched {
		background-color: #4A89DC;
		color: #fff;
	}

	.calendar-day.other-month {
		color: #ccc;
	}

	/* 专注情况样式 */
	.focus-stats {
		background-color: #fff;
		border-radius: 12px;
		padding: 15px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	}

	.focus-chart {
		height: 200px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
		border-radius: 8px;
		margin-bottom: 15px;
	}

	.chart-placeholder {
		color: #999;
		font-size: 14px;
	}


	.ranking-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-bottom: 15px;
	}


	.ranking-header {
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #f0f0f0;
		font-weight: bold;
		color: #666;
	}

	.ranking-item {
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.ranking-number {
		width: 30px;
		font-size: 14px;
		color: #666;
	}

	.member-name {
		flex: 2;
		font-size: 14px;
		color: #333;
		font-weight: 500;
		text-align: center;
	}

	.exam-count,
	.avg-score,
	.beat-rate {
		flex: 1;
		font-size: 14px;
		color: #333;
		text-align: center;
	}

	.focus-time {
		font-size: 14px;
		color: #666;
	}

	.member-list {
		margin-top: 15px;
		padding-top: 15px;
		border-top: 1px solid #f0f0f0;
	}

	.member-title {
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
	}

	.member-scroll {
		white-space: nowrap;
	}

	.member-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		margin-right: 15px;
		position: relative;
	}

	.member-avatar {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		margin-bottom: 5px;
	}

	.member-nickname {
		font-size: 12px;
		color: #333;
		width: 50px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.owner-tag {
		position: absolute;
		top: 0;
		right: -5px;
		background-color: #4A89DC;
		color: #fff;
		font-size: 10px;
		padding: 2px 4px;
		border-radius: 8px;
	}

	.group-id {
		margin-top: 10px;
		font-size: 14px;
		color: #666;
	}

	.manage-btn {
		font-size: 14px;
		color: #333;
		padding: 0 15px;
	}

	.manage-popup-container {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: flex;
		align-items: flex-end;
	}

	.manage-popup {
		width: 100%;
		background-color: #fff;
		border-radius: 12px 12px 0 0;
		padding: 50px 0;
	}

	.manage-list {
		padding: 0 15px;
	}

	.manage-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.manage-item.danger {
		color: #ff4d4f;
	}

	.member-manage {
		background-color: #fff;
		border-radius: 12px 12px 0 0;
		padding: 20px;
		max-height: 70vh;
	}

	.member-manage-list {
		padding: 0 15px;
		max-height: calc(70vh - 60px);
		overflow-y: auto;
	}

	.member-manage-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.member-info {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.remove-btn {
		color: #ff4d4f;
		font-size: 14px;
	}

	.punch-card-content {
		margin-top: 8px;
		font-size: 14px;
		color: #666;
		line-height: 1.5;
		padding: 0 5px;
		white-space: pre-line;
		/* 添加此属性以支持换行 */
	}

	.member-manage-container {
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.manage-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 15px;
		position: relative;
	}

	.close-icon {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
	}

	.manage-title {
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
		margin: 0 auto;
	}

	.close-icon {
		position: absolute;
		right: 15px;
		top: 15px;
	}

	.punch-textarea {
		width: 100%;
		height: 120px;
		font-size: 14px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		padding: 10px;
		margin-bottom: 10px;
	}
</style>